<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产厂家管理端</title>
    <style>
        .user-info {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px;
            background-color: #eee;
        }
        
        .user-info span {
            margin-right: 10px;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .a1{
            padding-top: 10px;
        }
        h1 {
            margin-top: 50px;
        }
        .left-btn {
            margin-right: auto;
        }
        .btn {
            padding: 5px 10px;
            background-color: #ccc;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        
    </style>
</head>
<body>
    <div class="header">
        <h1>招投标管理系统</h1>
    </div>

    <div id="app">
        <!-- 占位栏 -->
        <div class="a1"></div>
        <!-- 导航栏 -->
        <div class="user-info">
            <div class="left-btn">
                <el-button type="primary" @click="dialogFormVisible = true" class="btn">留言</el-button>
            </div>
            <span>欢迎您：{{ currentUser }}</span>
            <el-button type="danger" @click="logout">退出</el-button>
        </div>

        <!-- 留言栏 -->
        <el-dialog title="留言" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="请输入您的留言" :label-width="formLabelWidth">
                <el-input v-model="form.saying" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="leave_message">提 交</el-button>
            </div>
        </el-dialog>

        <!-- 招标信息栏 -->
        <div class="a2"> <center><h3>招标信息</h1></center> </div>
        <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
              prop="id"
              label="招标id"
              width="180">
            </el-table-column>
              <el-table-column
                prop="name"
                label="机电设备名称"
                width="180">
              </el-table-column>

              <el-table-column
                prop="type"
                label="型号"
                width="180">
              </el-table-column>
              
              <el-table-column
                prop="packing"
                label="包装要求">
              </el-table-column>

              <el-table-column
                prop="number"
                label="数量">
              </el-table-column>

              <el-table-column
                prop="deadline"
                label="招标截止日期">
              </el-table-column>

              <el-table-column
                prop="bail"
                label="投标保证金">
              </el-table-column>
            </el-table>
        </template>
    </div>

    <script src="js/axios-0.18.0.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <script>
        new Vue({
            el:"#app",
            mounted(){
                this.selectAll();
                this.first();
            },
            data() {
                return {
                    currentUser: "",
                    tableData: [],
                    dialogFormVisible: false,
                    form: {
                        saying:''
                    },
                    formLabelWidth: '120px',
                }
            },
            methods: {
                //查询招标信息
                selectAll(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'unit/getAll',
                        success:function(resp){
                            console.log(resp);
                            _this.tableData = resp;
                        }
                    })
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                    return 'warning-row';
                    } else if (rowIndex === 3) {
                    return 'success-row';
                    }
                    return '';
                },
                // 获取用户名
                first(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'userInfo',
                        success:function(resp){
                            _this.currentUser=resp.companyName;
                        }
                    })
                },
                logout(){
                    $.ajax({
                        method:'post',
                        url:'logout',
                        success:function(resp){
                            alert("退出成功！");
                        }
                    })
                    location.replace("/index.html");
                },
                leave_message(){
                    // 获取当前时间  
                    const now = new Date();  
                    // 格式化日期和时间  
                    const formattedDate = now.getFullYear() + '-' +  
                        ('0' + (now.getMonth() + 1)).slice(-2) + '-' +  
                        ('0' + now.getDate()).slice(-2) + ' ' +  
                        ('0' + now.getHours()).slice(-2) + ':' +  
                        ('0' + now.getMinutes()).slice(-2) + ':' +  
                        ('0' + now.getSeconds()).slice(-2);  
                    var _this = this;
                    $.ajax({
                        method:'post',
                        url:"leaveMessage",
                        data:{
                            person:this.currentUser,
                            message:this.form.saying,
                            time:formattedDate
                        },
                        success:function(resp){
                            alert("留言成功");
                            _this.dialogFormVisible=false;
                            _this.form.saying="";
                        }
                    })
                }
            }
        })  //vue
    </script>
</body>
</html>